<template>
  <view class="page">
    <view class="mask" v-if="[1, 2, 4].includes(state)">
      <template v-if="state === 1">
        <view class="mask-title">选择难度</view>
        <view class="btn btn1" @tap="init('simple')">
          <img class="btn-bgc" src="@/static/jdstb/button.png" alt="" />
          简单
        </view>
        <view class="btn btn2" @tap="init('ordinary')">
          <img class="btn-bgc" src="@/static/jdstb/button.png" alt="" />
          普通
        </view>
        <view class="btn btn2" @tap="init('diffculty')">
          <img class="btn-bgc" src="@/static/jdstb/button.png" alt="" />
          困难
        </view>
      </template>
      <template v-else-if="state === 2">
        <view class="btn btn-setart" @tap="start">
          <img class="btn-bgc" src="@/static/jdstb/button.png" alt="" />
          开始游戏
        </view>
      </template>
      <template v-else-if="state === 4">
        <view class="title2">完成训练！</view>
        <view class="record">
          <text>{{ record }}</text>
          <view class="unit">分</view>
        </view>
        <view class="btn btn-again" @tap="goAgain">
          <img class="btn-bgc" src="@/static/jdstb/button.png" alt="" />
          再次训练
        </view>
        <view class="btn btn-back" @tap="goBack">
          <img class="btn-bgc" src="@/static/jdstb/button.png" alt="" />
          退出训练
        </view>
      </template>
    </view>

    <img class="bgc" src="/src/static/image/game7-bgc.png" />
    <view class="header">
      <view class="text"
        >倒计时<text class="time">{{ gameTimeStr }}</text></view
      >
      <view class="text"
        >分数<text class="time">{{ record }}</text></view
      >
    </view>
    <view class="title">
      <text v-if="List.length" class="text" :style="{ color: List[active].color }">{{
        List[active].label
      }}</text>
    </view>
    <img class="tip" src="/src/static/image/game7-tip.png" />
    <view class="tip-text">
      <view>请选择字体颜色</view>
      <view>请注意，不是词汇的文字颜色</view>
    </view>
    <view class="options">
      <view class="option" v-for="(item, index) in colors" :key="index" @tap="answer(item.color)">{{
        item.label + '色'
      }}</view>
    </view>
    <!--    <view v-for="(item, index) in data" :key="index" :style="{ color: item.color }">-->
    <!--      {{ item.label }}-->
    <!--    </view>-->
    <!--    <view>选择难度</view>-->
    <!--    <view @tap="init('simple')">简单</view>-->
    <!--    <view @tap="next">下一题</view>-->
  </view>
</template>

<script>
let t
import { throttle } from '../../utils/tools'
export default {
  data() {
    return {
      state: 1, // 1 选择难度 2 准备开始 3 游戏阶段 4 结束记分
      gameTime: 60000,
      record: 0,
      List: [],
      active: 0,
      colors: [
        {
          label: '红',
          color: '#FF0000'
        },
        {
          label: '绿',
          color: '#40C700'
        },
        {
          label: '黄',
          color: '#FFD600'
        },
        {
          label: '蓝',
          color: '#0085FF'
        }
      ],
      // simple 简单 ordinary 普通 diffculty 困难
      diffculty: '',
      current: 0,
      probability: 0,
      probabilitys: {
        simple: 0.7,
        ordinary: 0.5,
        diffculty: 0.3
      },
      data: []
    }
  },
  computed: {
    gameTimeStr() {
      const str = (this.gameTime / 1000).toFixed(2).replace(/\./, ':')
      if (str.length < 5) {
        return '0' + str
      } else {
        return str
      }
    }
  },
  methods: {
    init(diffculty) {
      this.diffculty = diffculty

      this.probability = this.probabilitys[this.diffculty]

      this.state = 2
    },
    start() {
      this.state = 3

      this.next()

      console.log(this.List)

      t = setInterval(() => {
        if (this.gameTime - 10 < 0) {
          this.gameTime = 0
          clearInterval(t)
          t = null
          this.state = 4
        } else {
          this.gameTime = this.gameTime - 10
        }
      }, 10)
    },
    next() {
      const i = Math.floor(Math.random() * 4)
      const obj = {
        label: '',
        color: '',
        value: ''
      }
      obj.label = this.colors[i].label

      const f = this.shake(this.probability)
      console.log(f)
      if (f) {
        obj.color = this.colors[i].color
      } else {
        const n = Math.floor(Math.random() * 4)

        obj.color = this.colors[i === n ? n + 1 : n].color
      }

      this.List.push(obj)
    },
    shake(p) {
      const n = Math.random()

      if (n <= p) {
        return true
      } else {
        return false
      }
    },
    answer: throttle(function (color) {
      this.List[this.active].value = color

      if (this.List[this.active].color === color) {
        this.record = this.record + 1
      }

      console.log(this.List)

      this.next()
      this.active = this.active + 1
    }, 500),
    goAgain() {
      this.record = 0
      this.gameTime = 60000
      this.List = []

      this.state = 2
    },
    goBack() {
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes rotate-two {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

.page {
  position: relative;
  width: 100vw;
  height: 100vh;

  .bgc {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
  }

  .header {
    position: absolute;
    top: 32rpx;
    left: 48rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 654rpx;
    height: 112rpx;
    padding: 0 50rpx 0 52rpx;
    background: #de983f;
    border: 4rpx solid #824211;
    border-radius: 16rpx;
    box-shadow: inset 0rpx 8rpx 4rpx 0rpx #b67523;

    .text {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 68rpx;
      font-size: 32rpx;
      font-weight: bold;
      line-height: 68rpx;
      color: #431f00;
      -webkit-text-stroke: 1rpx #fff;

      .time {
        margin-left: 16rpx;
        font-size: 48rpx;
        line-height: 68rpx;
        color: #431f00;
        -webkit-text-stroke: 1rpx #fff;
      }
    }
  }

  .title {
    position: absolute;
    top: 172rpx;
    left: 48rpx;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 654rpx;
    height: 503rpx;
    padding-top: 92rpx;
    background: #fff;
    border: 8rpx solid #824211;
    border-radius: 24rpx;

    .text {
      font-size: 208rpx;
      font-weight: bold;
    }
  }

  .tip {
    position: absolute;
    top: 702rpx;
    left: 48rpx;
    width: 654rpx;
    height: 202rpx;
  }

  .tip-text {
    position: absolute;
    top: 742rpx;
    left: 90rpx;
    width: 572rpx;
    height: 124rpx;
    font-family: "PingFang SC";
    font-size: 44rpx;
    font-weight: bold;
    line-height: 62rpx;
    color: #431f00;
    text-align: center;
    -webkit-text-stroke: 1px #fff;
  }

  .options {
    position: absolute;
    top: 992rpx;
    left: 48rpx;
    display: flex;
    flex-flow: row wrap;
    gap: 46rpx;
    width: 654rpx;

    .option {
      width: 304rpx;
      height: 124rpx;
      font-family: "PingFang SC";
      font-size: 48rpx;
      font-weight: 500;
      line-height: 124rpx;
      color: #222;
      text-align: center;
      background: #fff;
      border: 4rpx solid #824211;
      border-radius: 24rpx;
      box-shadow: 8rpx 8rpx 4rpx 0rpx #462003;

      &:active {
        background: #ffb2b2;
        border: 4rpx solid #f00;
      }
    }
  }
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: rgb(0 0 0 / 50%);

  .mask-title {
    margin-top: 280rpx;
    font-family: "PingFang SC";
    font-size: 48rpx;
    font-weight: 500;
    line-height: 68rpx;
    color: #fff;
    text-align: center;
    text-shadow: 0 4px 0 rgb(0 0 0 / 60%);
  }

  .btn1 {
    margin-top: 128rpx;
  }

  .btn2 {
    margin-top: 64rpx;
  }

  .btn-setart {
    margin: 944rpx;
  }

  .btn {
    position: relative;
    width: 518rpx;
    height: 152rpx;
    font-size: 48rpx;
    line-height: 132rpx;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 0 rgb(0 0 0 / 60%);
    animation: rotate-two 1s infinite;

    .btn-bgc {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 518rpx;
      height: 152rpx;
    }
  }

  .title2 {
    position: absolute;
    top: 184rpx;
    left: 248rpx;
    font-family: "PingFang SC";
    font-size: 64rpx;
    font-weight: 500;
    line-height: 90rpx;
    color: #fff;
    text-shadow: 0 4px 0 rgb(0 0 0 / 60%);
  }

  .record {
    position: absolute;
    top: 330rpx;
    right: 176rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    font-family: "PingFang SC";
    font-size: 240rpx;
    font-weight: 500;
    line-height: 336rpx;
    color: #fff;
    text-shadow: 0 12px 0 rgb(0 0 0 / 60%);
  }

  .unit {
    margin-bottom: 57rpx;
    margin-left: 10rpx;
    font-family: "PingFang SC";
    font-size: 48rpx;
    font-weight: 500;
    line-height: 68rpx;
    color: #fff;
    text-shadow: 0 8px 0 rgb(0 0 0 / 60%);
  }

  .btn-again {
    position: absolute;
    top: 916rpx;
    left: 116rpx;
  }

  .btn-back {
    position: absolute;
    top: 1132rpx;
    left: 116rpx;
  }
}
</style>
